<template>
	<view class="wap">
		<view class="info-container flex">
			<view class="item">
				<view class="gray-text">累计收益（元）</view>
				<view class="black-text">{{team.total_commission||'0.00'}}</view>
			</view>
			<view class="item">
				<view class="gray-text">今日收益（元）</view>
				<view class="red-text">+{{team.today_commission||'0.00'}}</view>
			</view>
			<view class="item">
				<view class="gray-text">我的团队（人）</view>
				<view class="black-text">{{team.total_num||'0'}}</view>
			</view>
			<view class="item">
				<view class="gray-text">今日新增（人）</view>
				<view class="red-text">+{{team.today_num||'0'}}</view>
			</view>
			<view class="flex-aro bottom-btn">
				<navigator class="btn white-btn" url="/pages/revenueRule/revenueRule">收益规则</navigator>
				<navigator class="btn" url="/pages/revenueRanking/revenueRanking">收益排行</navigator>
			</view>
		</view>
		<view class="product-details">
			<view class="flex-bet" style="border-bottom: 1px solid #F7f8f9;padding-bottom: 20rpx">
				<view class="product-title">我的团队</view>
				<navigator class="invite-btn" url="/pages/inviteRecord/inviteRecord">去提现</navigator>
			</view>
			<view class="flex-y-center list" v-for="(item,index) in data.data_list" :key="index">
				<image :src="item.avatar" class="img"></image>
				<view class="name">{{item.nickname}}</view>
			</view>
			
			<view v-if="data.no_list" class="bottom-text">暂无数据</view>
			<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
			<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
						 加载中...
			</view>
			
		</view>

	</view>
</template>

<script>
	import {getCommissionRecord,getTeamUser} from '../../apirequest/api.js';
	
	
	export default {
		data() {
			return {
				data:{
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock:0,
				team:[],
			}
		},
		onLoad() {
			this.loadDataList();
		},
		onShow() {
			this.loadData();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function (t) {
			var o = this;
			o.loadDataList(function () {
			  o.data.loading_more = !0;
			});
		},
		methods: {
			//获取数据
			loadData: function () {
			  getCommissionRecord({}).then((res) => {
			  		if(res.code == 1){
						this.team = res.data.team;
					} else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:0
							});
						},1000)
					}
			  }).catch(err => {
			  	 console.log(err)
			  })
			  
			},	
			 //获取数据列表
			  loadDataList: function (f) {
				var o = this;
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
				  var page = (o.data.current_page || 0) + 1;
				  var data = {
					page: page,
				  }
				  o.lock = 1;
				  console.log(o.lock)
				  getTeamUser(data).then((t) => {
				  	if(t.code == 1){
						  if (1 == t.data.current_page && !t.data.data.length) {
							  o.data.no_list= !0;
							  o.data.loading_more= !1
						  }
						 if (t.data.data && t.data.data.length) {
							 o.data.data_list = o.data.data_list || [];
							 o.data.data_list = o.data.data_list.concat(t.data.data), 
							 o.data.current_page= page;
						 }	
					     if (!t.data.has_more) {
							 o.data.no_more= !0;
						 }						  
						 
				  	}else{
				  		uni.showToast({
				  			title:'网络繁忙',
				  			icon:'error'
				  		})
				  	}
					o.lock = 0;
				  });
				}
			  },
		}
	}
</script>

<style>
	.wap .info-container {
		margin: 10px 15px;
		background-color: #fff;
		border-radius: 10px;
		flex-wrap: wrap;

	}

	.wap .info-container .item {
		width: 50%;
		border: 1rpx solid #f7f8f9;
		text-align: center;
		padding: 25rpx 0;
    box-sizing: border-box;
	}

	.wap .info-container .item .gray-text {
		color: #bec1c7;
		font-size: 26rpx;
		margin-bottom: 15rpx;
	}

	.wap .info-container .item .black-text {
		color: #333;
		font-weight: 700;
		font-size: 14px;
	}

	.wap .info-container .item .red-text {
		color: #E61b1b;
		font-weight: 700;
		font-size: 14px;
	}

	.wap .info-container .bottom-btn {
		width: 100%;
		padding: 30rpx 0;
	}

	.wap .info-container .bottom-btn .btn {
		font-size: 24rpx;
		border-radius: 40rpx;
		background: #ff8546;
		color: #fff;
		padding: 10rpx 22rpx;
		border: 1px solid #ff8546;
		font-weight: 700;
	}

	.wap .info-container .bottom-btn .white-btn {
		background: #fff;
		color: #333;
		border: 1px solid #eaebee;
	}

	.wap .product-details {
		margin: 10px 15px;
		background-color: #fff;
		padding: 10px 7px;
		border-radius: 10px;
	}

	.wap .product-details .product-title {
		padding: 0px 7px;
		border-left: 5px solid #ff8546;
		font-weight: 700;
		font-size: 30rpx;
	}

	.wap .product-details .invite-btn {
		font-size: 24rpx;
		border-radius: 40rpx;
		background: #ff8546;
		color: #fff;
		padding: 10rpx 22rpx;
		border: 1px solid #ff8546;
		font-weight: 700;
	}

	.wap .product-details .list {
		padding: 20rpx 0;
		border-bottom: 1px solid #f7f8f9;
	}

	.wap .product-details .list .img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.wap .product-details .list .name {
		font-weight: 700;
		font-size: 30rpx;
	}
</style>
